﻿
@{
    ViewBag.Title = "庐山云雾茶-登录";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Head{
    <style>
        .red {
            color: red;
            font-size: 14px;
        }
        .btnLogin{
            width:300px;
            height:40px;
            margin-top:10px;
            border-radius:20px;
            font-size:18px;
            background-color:rgb(0,150,136);
            border:none;
            color:white;
        }
        .btnLogin:hover{
            cursor:pointer;
        }
    </style>
}
<!--顶部样式-->
<div class="common_top">
    <div class="Narrow">
        <div class=" left logo"><a href="/Home/Index"><img src="~/common/images/logo3.png" /></a></div>
        <!--电话图层-->
        <div class="phone"><label>全国服务热线：</label><em>400-345-5633</em></div>
    </div>
</div>
<div class="login_bg">
    <div class="login Narrow">
        <div class="login_advertising"><img src="~/common/images/bg_03.png" /></div>
        <div class="login_frame">
            <div class="login-form">
                <div class="login-name">
                    <h1 class="name">用户登录</h1>
                    <span class="login_link">
                        <a href="/Register/Index"><b></b>用户注册</a>
                    </span>
                </div>
                <!--提示信息-->
                <form id="form1">
                    <div class="Prompt" id="errorMsg"></div>
                    <div class="form clearfix">
                        <div class="item item-fore1">
                            <label for="loginname" class="login-label name-label">
                            </label><input name="UserName" type="text" class="text" placeholder="请输入账号" />
                        </div>
                        <div class="item item-fore2">
                            <label for="nloginpwd" class="login-label pwd-label">
                            </label>
                            <input name="PassWord" type="password" class="text" placeholder="用户密码" />
                        </div>
                        <div class="item item-fore2">
                            <label for="Code" class="login-label pwd-label">
                            </label>
                            <input name="Code" id="Code" type="text" class="text" placeholder="验证码" />
                            <a href="javascript:void();">                               
                                <img id="imgCode" src="/Login/GetValidCode" alt="验证码图片" />
                            </a>
                        </div>
                        <div class="Forgetpass"><a href="/Login/GetBackPwd1">忘记密码？</a></div>
                    </div>
                    <div class="login-btn">
                        <input type="submit" value="登&nbsp;&nbsp;&nbsp;&nbsp;录" class="btnLogin" />
                    </div>
                </form>
            </div>
            <div class="Login_Method">
            </div>
        </div>
    </div>
</div>
<!--底部样式-->
<div class="bottom_footer">
    <p><a href="#">关于我们</a> | <a href="#">联系我们</a> | <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cspan id='cnzz_stat_icon_1273799383'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1273799383%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script> | <a href="#">法律申明</a> | <a href="#">友情链接</a>  </p>
    <p>Copyright©2018九江庐山.All Rights Reserved. </p>
</div>

@section FooterScript{
    <script src="~/common/Threelinkage/layui/layui.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>

    <script src="~/common/js/jquery.validate.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#errorMsg').hide();
            layui.use("layer", function () {

                var layer = layui.layer;

                jQuery.validator.addMethod("isUserName", function (value, element) {
                    var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
                    var email = /^[a-z0-9]+([._\\-]*[a-z0-9])*@@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
                    return this.optional(element) || (mobile.test(value) || email.test(value));
                }, "请正确填写您的账号");

                $('#form1').validate({
                    errorPlacement: function (error, element) {
                        $('#errorMsg').show();
                        error.appendTo($('#errorMsg'));
                    },
                    errorClass: "red",
                    submitHandler: function () {
                        var load = layer.load(1, {
                            shade: [0.1, '#fff'] //0.1透明度的白色背景
                        });
                        var json = $('#form1').serialize();
                        $.ajax({
                            url: "/Login/Index",
                            data: json,
                            dataType: "json",
                            type: "post",
                            success: function (res) {
                                if (res.status == "ok") {
                                    location.href = "/Home/Index";
                                }
                                else if (res.status == "redirect") {
                                    $('#imgCode').click();
                                    location.href = res.data;
                                }
                                else if (res.status == "error") {
                                    layer.msg(res.errorMsg, { icon: 2, time: 1000 });
                                    $('#imgCode').click();
                                    layer.close(load);
                                }
                                else {
                                    layer.msg("错误", { icon: 2, time: 1000 });
                                    $('#imgCode').click();
                                    layer.close(load);
                                }
                            }, error: function () {
                                layer.msg("网络错误", { icon: 2, time: 1000 });
                                $('#imgCode').click();
                                layer.close(load);
                            }
                        });
                    },
                    rules: {
                        UserName: {
                            required: true,
                            isUserName: true
                        },
                        PassWord: {
                            required: true
                        },
                        Code: {
                            required: true
                        }
                    },
                    messages: {
                        UserName: {
                            required: "账户不为空<br />",
                            isUserName: "您输入的不是正确的电话号码或邮箱<br />"
                        },
                        PassWord: {
                            required: "密码不为空*<br />"
                        },
                        Code: {
                            required: "验证码不为空*<br />"
                        }
                    }
                });

                $('#imgCode').click(function () {
                    $('#imgCode').attr("src", "/Login/GetValidCode?time=" + new Date());
                });

            });
        });
    </script>
}